<template>
  <div class="wrap">
    <div class="d-flex align-items-center">
      <el-table ref="sectionList"
                :data="params.bundleSegments"
                highlight-current-row
                @current-change="handleCurrentChange"
                tooltip-effect="dark"
                style="width: 100%;margin-top: 5px"
                border size="small">
        <el-table-column prop="index"
                         :label="$t('message.BundleSegmentExportTool.no')"
                         min-width="30">
          <template v-slot="scope">
            <label class="label">{{ scope.row.index + 1 }}</label>
          </template>
        </el-table-column>
        <el-table-column prop="segmentName"
                         :label="$t('message.BundleSegmentExportTool.segmentName')"
                         min-width="80">
          <template v-slot="scope">
            <label class="label">{{ scope.row.segmentName }}</label>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn">
      <el-button
          type="primary"
          size="small"
          @click="confirm">
        {{ $t('message.BundleSegmentExportTool.confirm') }}
      </el-button>

      <el-button
          size="small"
          @click="cancel">
        {{ $t('message.BundleSegmentExportTool.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {bundleSegmentExportCommand} from "../../../command/BundleSegmentExportCommand";


export default {
  mixins: [DialogMixin],
  data() {
    return {
      params: {}
    }
  },

  mounted() {
    bundleSegmentExportCommand.init(500, 300, 800, () => {
    });
  },

  methods: {

    confirm() {
    },

    cancel() {
      bundleSegmentExportCommand.closeActiveCmd();
    },

    changePluginContainerHeight() {
      bundleSegmentExportCommand.changePluginContainerHeight({
        minWidth: this.$el.clientWidth,
        maxHeight: this.$el.clientHeight,
        width: 500
      })
    }
  },

  watch: {},

  computed: {}
}

</script>

<style scoped>
.wrap {
  font-size: 12px;
}
</style>